import '../ui/layui.all'
import './DrawWorker.css'
import GlobeTracker from './uitls/GlobeTracker'
import * as Cesium from 'cesium'
const  layerId = "globeDrawerDemoLayer";
import dragIcon from './img/dragIcon.png'
const DrawWorker = function(views){
    this.views = views
    var self = this
    this.temp = '<div class="cesium-widget-title">'+
    '<div class="title-info"><i class="layui-icon layui-icon-theme"></i>绘图工具</div>'+
    '<div class="title-btn">'+
        '<i class="layui-icon layer-btn layui-icon-close" data-method="close"></i>'+
   '</div></div>'+
    '<div class="cesium-widget-cont">'+
        '<ul class="tools-group">'+
            '<li title="点"><i class="layui-icon layer-btn icon-point" data-method="drawPoint"></i></li>'+
            '<li title="线"><i class="layui-icon layer-btn icon-polyline" data-method="drawPolyline"></i></li>'+
            '<li title="面"><i class="layui-icon layer-btn icon-polygon" data-method="drawPolygon"></i></li>'+
            '<li title="清除"><i class="layui-icon layer-btn icon-clear" data-method="drawClear"></i></li>'+
            // '<li title="分析工具"><i class="layui-icon layer-btn layui-icon-util" data-method="openanalysis"></i></li>'+
            // '<li title="系统工具"><i class="layui-icon layer-btn layui-icon-set-fill" data-method="close"></i></li>'+
        '</ul>'+
    '</div>'
    this.contanner = this._drawWidget()
    this.DynamicDrawTool =  new GlobeTracker(views);
}
DrawWorker.prototype={
    openWidget:function(){
        this.contanner.style.display = "block"
    },
    closeWidget:function(){
        this.contanner.style.display = "none"
    },
    _drawWidget:function(){
        var dom =  document.createElement("div");
        dom.className = "cesium-widget";
        dom.id="DrawWorker"
        dom.innerHTML = this.temp;
        var body = document.getElementsByTagName("body")[0];
        body.appendChild(dom);
        this._bind()
        //让组件可以拖动，只在父容器中，并只能点击.cesium-widget-title拖动
        $('#DrawWorker').draggabilly({ containment: true , handle: '.cesium-widget-title' });
        return dom
    },
    _bind:function(){
        var self = this
        var active = {
            drawPoint:function(){
                
                self.DynamicDrawTool.trackPoint(function (position) {
                    var objId = (new Date()).getTime();
                    // shapeDic[objId] = positions;
                    self.showPoint(objId, position);
                });
            },
            drawPolyline:function(){
                self.DynamicDrawTool.trackPolyline(function (positions) {
                    var objId = (new Date()).getTime();
                    // shapeDic[objId] = positions;
                    self.showPolyline(objId, positions);
                });
            },
            drawPolygon:function(){
                self.DynamicDrawTool.trackPolygon(function (positions) {
                    var objId = (new Date()).getTime();
                    // shapeDic[objId] = positions;
                    self.showPolygon(objId, positions);
    
                });
            },
            drawClear:function(){
                self.clearDraw();
            },
            close:function(){
                self.closeWidget()
            }
        }
        $('#DrawWorker .layer-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
    },
    showPoint:function(objId, position) {
        var self = this
        var entity = self.views.entities.add({
            layerId: layerId,
            objId: objId,
            shapeType: "Point",
            position: position,
            billboard: {
                image: dragIcon,
                eyeOffset: new Cesium.ConstantProperty(new Cesium.Cartesian3(0, 0, -100)),
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
            }
        });
    },
     showPolygon:function(objId, positions) {
        var self = this
        var material = Cesium.Color.fromCssColorString('#ff0').withAlpha(0.5);
        var outlineMaterial = new Cesium.PolylineDashMaterialProperty({
            dashLength: 16,
            color: Cesium.Color.fromCssColorString('#00f').withAlpha(0.7)
        });
        var outlinePositions = [].concat(positions);
        outlinePositions.push(positions[0]);
        var bData = {
            layerId: layerId,
            objId: objId,
            shapeType: "Polygon",
            polyline: {
                positions: outlinePositions,
                clampToGround: true,
                width: 2,
                material: outlineMaterial
            },
            polygon: new Cesium.PolygonGraphics({
                hierarchy: positions,
                asynchronous: false,
                material: material
            })
        };
        var entity = self.views.entities.add(bData);
    },
    showPolyline:function(objId, positions) {
        var self = this
        var material = new Cesium.PolylineGlowMaterialProperty({
            glowPower: 0.25,
            color: Cesium.Color.fromCssColorString('#00f').withAlpha(0.9)
        });
        var bData = {
            layerId: layerId,
            objId: objId,
            shapeType: "Polyline",
            polyline: {
                positions: positions,
                clampToGround: true,
                width: 8,
                material: material
            }
        };
        var entity = self.views.entities.add(bData);
    },
    clearDraw:function(){
        var self = this
        var entityList = self.views.entities.values;
        if (entityList == null || entityList.length < 1) {
            return;
        }
        for (var i = 0; i < entityList.length; i++) {
            var entity = entityList[i];
            if (entity.layerId == layerId ) {
                self.views.entities.remove(entity);
                i--;
            }
        }
    }
}
export default DrawWorker